<template>

    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span style="font-size: 24px;">{{$t('common.payChannel')}}</span><!--支付渠道-->
            </h3>
            <div class="module_content">
                <el-tabs v-model="activeName"  @tab-click="handleClick">
                    <el-tab-pane  name="first">
                        <span slot="label" style="font-size: 24px"> {{$t('common.loan')}} </span><!--放款-->
                        <div class="table_list" style="margin-top: 10px">
                            <!--查询start-->
                            <!-- <el-form ref="form" :model="loanForm" :inline="false">
                                <el-row :gutter="20">
                                    <el-col :span="5">
                                        <el-form-item>
                                            <el-select v-model="loanForm.appName" :placeholder="$t('system.appName')" style="width:100%;" @change="getLoanChannel">
                                                <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                                            </el-select>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-button @click="getLoanChannel" type="primary">{{ $t('common.search') }}</el-button>
                                    </el-col>
                                </el-row>
                            </el-form> -->
                            <!--查询end-->
                            <div style="padding-bottom: 20px;">
                                <el-button @click="()=>this.$refs.loanDialog.shoDialog()" type="primary">{{ $t('common.edit') }}</el-button>
                            </div>
                            <el-table :data="tableData" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                                
                                <el-table-column :label="$t('common.payMethod')"  prop="name" min-width="150">
                                </el-table-column><!--支付方式-->
                                
                                <el-table-column :label="$t('common.payChannel')" min-width="150">
                                    <template slot-scope="{ row }">{{ row.companyCode | SwitchChannelCompany }}</template>
                                </el-table-column><!--支付渠道-->
                                <el-table-column :label="$t('common.status')"  prop="isUse" min-width="150">
                                    <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                                </el-table-column><!--状态-->
                                <el-table-column label="APP"  prop="appName" min-width="150">
                                </el-table-column><!--支付方式-->
                                <!-- <el-table-column :label="$t('common.operation')" min-width="120">
                                    <template slot-scope="{ row }">
                                        <el-button type="text" @click="editHandler(row, 'loan')">{{ $t('finance.edit') }}</el-button>
                                    </template>
                                </el-table-column> -->
                            </el-table>
                        </div>
                    </el-tab-pane>

                    <el-tab-pane  name="second">
                        <span slot="label" style="font-size: 24px"> {{$t('common.repayment')}} </span><!--还款-->
                        <div style="margin-bottom: 16px;">
                            <el-row :gutter="20">
                                <el-col :span="6">
<!--                                    <select-app-list v-model="repaySearchForm.appName" @giveParentData="getAppList" :placeholder="$t('system.appName')"></select-app-list>&lt;!&ndash;app名称&ndash;&gt;-->
                                    <el-select v-model="repaySearchForm.appName" :placeholder="$t('system.appName')" style="width:100%;" @change="handleRepayAppChange">
                                        <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                                    </el-select>
                                </el-col>
                                <el-col :span="18">
                                    {{$t('common.nowPayChannel')}}: {{ repayCompany }}
                                    <el-button @click="changeRepayChannel" size="mini" type="primary" style="margin-left:20px;">{{ $t('common.change') }}</el-button>
                                </el-col>
                            </el-row>
                        </div>
                        <el-table :data="repayChannelList" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                            <el-table-column :label="$t('common.payMethod')"  prop="name" min-width="150">
                            </el-table-column><!--支付方式-->
                            <el-table-column :label="$t('common.status')"  prop="isUse" min-width="150">
                                <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                            </el-table-column><!--状态-->
                            <el-table-column :label="$t('common.operation')" min-width="120">
                                <template slot-scope="{ row }">
<!--                                    <el-button type="text" @click="editHandler(row)">{{ $t('finance.edit') }}</el-button>-->
                                    <el-switch v-model="row.isUse" @change="handleStatusChange(row)" :active-value="0" :inactive-value="1"></el-switch>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>

                    <el-tab-pane v-if="showChannelTab" name="third">
                        <span slot="label" style="font-size: 24px"> {{$t('common.channel')}} </span><!--渠道-->
                        <div style="margin-bottom: 16px;">
                            <!-- <el-row :gutter="20"> -->
                                <!-- <el-col :span="6"> -->
                                    <!-- <select-app-list v-model="repaySearchForm.appName" @giveParentData="getAppList" :placeholder="$t('system.appName')"></select-app-list>&lt;!&ndash;app名称&ndash;&gt;-->
                                    <!-- <el-select v-model="repayChannelForm.appName" :placeholder="$t('system.appName')" style="width:100%;" @change="getRepayChannelConfigNew">
                                        <el-option v-for="item in appList" :key="item.id" :value="item.name" :label="item.name" ></el-option>
                                    </el-select>
                                </el-col> -->
                            <!-- </el-row> -->
                            <el-button @click="()=>this.$refs.channelDialog.shoDialog()" type="primary">{{ $t('common.edit') }}</el-button>
                        </div>

                        <div class="repay_channel_title">{{ $t('finance.onlineRepay') }}</div><!--线上还款-->
                        <el-table :data="onlineTable" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                            <el-table-column :label="$t('common.payMethod')"  prop="name" min-width="150">
                            </el-table-column><!--支付方式-->
                            <el-table-column :label="$t('common.payChannel')" min-width="150">
                                <template slot-scope="{ row }">{{ row.paymentCompanyCode | SwitchChannelCompany }}</template>
                            </el-table-column><!--支付渠道-->
                            <el-table-column :label="$t('common.status')"  prop="isUse" min-width="150">
                                <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                            </el-table-column><!--状态-->
                            <el-table-column label="APP"  prop="appName" min-width="150"></el-table-column>

                            <!-- <el-table-column :label="$t('common.operation')" min-width="120">
                                <template slot-scope="{ row }">
                                    <el-button type="text" @click="editHandler(row, 'channel')">{{ $t('finance.edit') }}</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>

                        <div class="repay_channel_title">{{ $t('finance.offlineRepay') }}</div><!--下线还款-->
                        <el-table :data="offlineTable" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">
                            <el-table-column :label="$t('common.payMethod')"  prop="name" min-width="150">
                            </el-table-column><!--支付方式-->
                            <el-table-column :label="$t('common.payChannel')" min-width="150">
                                <template slot-scope="{ row }">{{ row.paymentCompanyCode | SwitchChannelCompany }}</template>
                            </el-table-column><!--支付渠道-->
                            <el-table-column :label="$t('common.status')"  prop="isUse" min-width="150">
                                <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                            </el-table-column><!--状态-->
                            <el-table-column label="APP"  prop="appName" min-width="150"></el-table-column>

                            <!-- <el-table-column :label="$t('common.operation')" min-width="120">
                                <template slot-scope="{ row }">
                                    <el-button type="text" @click="editHandler(row, 'channel')">{{ $t('finance.edit') }}</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>

                        <div class="repay_channel_title">{{ $t('finance.instapayRepay') }}</div><!--Instapay还款-->
                        <el-table :data="instapayTable" style="width: 100%;" :highlight-current-row="true" :max-height="tableMaxHeight">

                            <el-table-column :label="$t('common.payMethod')"  prop="name" min-width="150">
                            </el-table-column><!--支付方式-->
                            <el-table-column :label="$t('common.payChannel')" min-width="150">
                                <template slot-scope="{ row }">{{ row.paymentCompanyCode | SwitchChannelCompany }}</template>
                            </el-table-column><!--支付渠道-->
                            <el-table-column :label="$t('common.status')"  prop="isUse" min-width="150">
                                <template slot-scope="{ row }">{{ row.isUse | switchStatus }}</template>
                            </el-table-column><!--状态-->
                            <el-table-column label="APP"  prop="appName" min-width="150"></el-table-column>

                            <!-- <el-table-column :label="$t('common.operation')" min-width="120">
                                <template slot-scope="{ row }">
                                    <el-button type="text" @click="editHandler(row, 'channel')">{{ $t('finance.edit') }}</el-button>
                                </template>
                            </el-table-column> -->
                        </el-table>

                    </el-tab-pane>
                </el-tabs>
            </div>
        </div>

        <!-- 更改放款渠道 -->
        <el-dialog
                :title="form.formTitle"
                :visible.sync="dialogVisible"
                width="660px">
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-form-item prop="isUse" :label="$t('common.status')">
                    <el-select v-model="form.isUse" style="width: 100%;">
                        <el-option key="0" :label="$t('collection.startUse')" :value="0"></el-option>
                        <el-option key="1" :label="$t('common.close')" :value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="companyCode" :label="$t('common.payChannel')">
                    <el-select v-model="form.companyCode" style="width: 100%;" :disabled="form.isUse === 1">
                        <el-option v-for="item in companyData" :key="item.companyCode" :value="item.companyCode" :label="item.name" ></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="editSubmit" :disabled="form.isUse !== 0 && form.isUse !== 1">{{$t('common.confirm')}}</el-button>
            </span>
        </el-dialog>

        <!--更改还款渠道-->
        <el-dialog
                :title="$t('finance.changeRepayChannel')"
                :visible.sync="isVisibleRepayDialog"
                width="660px">
            <el-form ref="repayForm" :model="repayForm" :rules="rules" :inline="false" :label-width="$i18n.locale==='zhCN'?'100px':'200px'" class="module_form">
                <el-form-item prop="code" :label="$t('common.payChannel')">
                    <el-select v-model="repayForm.code" @change="handleRepayCompanyChange">
                        <el-option v-for="item in companyData" :key="item.companyCode" :value="item.companyCode" :label="item.name" ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="remark" :label="$t('common.applicableOrder')">
                    <el-checkbox-group v-model="repayForm.remark">
                        <el-checkbox label="1" disabled>{{ $t('common.undisbursedOrder') }}</el-checkbox>
                        <el-checkbox label="1" disabled>{{ $t('common.loaningOrder') }}</el-checkbox>
                        <el-checkbox label="1" disabled>{{ $t('common.offlinePaymentOrders') }}</el-checkbox>
                        <el-checkbox label="1" disabled>{{ $t('common.loanFailedOrder') }}</el-checkbox>
                        <el-checkbox label="2" disabled>{{ $t('common.unFinisedOrder') }}</el-checkbox>
                        <el-checkbox label="3" disabled>{{ $t('common.partialRepaymentOrder') }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
            <!--<div style="color: red">* {{ $t('common.notApplicable60') }}</div>-->
            <span slot="footer" class="dialog-footer">
                <el-button @click="isVisibleRepayDialog = false">{{$t('common.cancel')}}</el-button>
                <el-button type="primary" @click="changeSubmit" :disabled="!repayForm.code">{{$t('common.confirm')}}</el-button>
            </span>
        </el-dialog>
        <editLoanDialog @addSuccess="getLoanChannel" ref="loanDialog" :propData="[]"></editLoanDialog>
        <editChannelDialog @addSuccess="getRepayChannelConfigNew" ref="channelDialog" :propData="[]"></editChannelDialog>
    </div>
</template>
<script src="./main.js"></script>
<style lang="scss" scoped>
    .tab-title-size {
        font-size: 24px;
    }
    .el-checkbox {
        display: block;
    }
    .repay_channel_title {
        font-size: 18px;
        font-weight: bold;
        padding: 20px 0 10px;
    }
</style>
